<template>
	<div class="session-statistics-container">
		<div class="header">
			<div class="left-wrapper">
				<span class="title">会话统计</span>
				<img src="@/assets/img/session-statistics.png" alt="" />
			</div>
			<div class="right-wrapper">
				<p class="day">
					<span v-for="item in dayOption" :key="item.id" class="day-text"
						:class="{ activeDayOption: activeDay === item.id }" @click="selectDay(item.id)">{{ item.label
						}}</span>
				</p>
				<div class="time">
					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="请选择开始时间" align="right"
						:picker-options="pickerOptions" @change="changeSatrt"> </el-date-picker>
					<i class="search-line">~</i>
					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="请选择结束时间" align="right"
						:picker-options="pickerOptions" @change="changeEnd"> </el-date-picker>
				</div>
			</div>
		</div>
		<p class="statistics-line"></p>
		<div class="session-content">
			<div class="left-box">
				<div>
					<span class="title">进电量</span>
					<p class="value">{{ statisticsData.allCount }}</p>
					<span class="title marginTop38">振铃数</span>
					<p class="value">{{ statisticsData.ringingCount }}</p>
					<span class="title marginTop38">呼叫失败数</span>
					<p class="value">{{ statisticsData.failedCount }}</p>
				</div>
				<div>
					<span class="title">呼叫排队数</span>
					<p class="value">{{ statisticsData.queuedCount }}</p>
					<span class="title marginTop38">接听数</span>
					<p class="value">{{ statisticsData.acceptedCount }}</p>
					<span class="title marginTop38">拒接数</span>
					<p class="value">{{ statisticsData.rejectedCount }}</p>
				</div>
			</div>
			<p class="vertical-line"></p>
			<div class="right-box">
				<div>
					<span class="title">平均排队时长</span>
					<p class="value">{{ statisticsData.avgQueuingDuration ? statisticsData.avgQueuingDuration : 0 }}</p>
					<span class="title marginTop38">平均振铃时长</span>
					<p class="value">{{ statisticsData.avgRingingDuration ? statisticsData.avgRingingDuration : 0 }}</p>
					<span class="title marginTop38">平均会话时长</span>
					<p class="value">{{ statisticsData.avgAcceptedDuration || 0 }}</p>
				</div>
				<div>
					<span class="title">排队放弃数</span>
					<p class="value">{{ statisticsData.giveUpQueuedCount }}</p>
					<div class="ring-release">
						<span class="title">振铃早释</span>
						<span class="imgQuestion">
							<img src="@/assets/img/aiworkflowimage/grayQuestion.png" alt="" class="question" />
							<span class="tips">坐席振铃中访客退出挂断</span>
						</span>
					</div>
					<p class="value">{{ statisticsData.ringReleasedCount }}</p>
					<span class="title marginTop38">会话无画面数</span>
					<p class="value ">{{ statisticsData.noPictureCount }}</p>
				</div>
				<div>
					<span class="title">会话正常数</span>
					<p class="value">{{ statisticsData.normalCount }}</p>
					<span class="title marginTop38">会话卡顿数</span>
					<p class="value">{{ statisticsData.stuckedCount }}</p>
				</div>
			</div>
			<div class="pie-wrapper">
				<p class="title">排队放弃率</p>
				<div class="circle-box">
					<el-progress type="circle" :percentage="parseInt(statisticsData.giveUpQueuedRatio * 100)"
						color="#FFB024" define-back-color="#4F7AFD" text-color="#333" stroke-width="10"
						stroke-linecap="square"></el-progress>
					<div class="queue-box">
						<p>
							<i class="queup-background"></i>
							<span class="form-line">排队</span>
						</p>
						<p style="margin-top: 12px">
							<i class="give-background"></i>
							<span class="give-up">放弃</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { getSessionStatistics } from '@/api/api';
export default {
	name: '',
	components: {},
	props: {},
	data () {
		return {
			statisticsData: {
				allCount: 0, //进电量
				ringingCount: 0, //振铃数
				failedCount: 0, //呼叫失败数
				queuedCount: 0, //呼叫排队数
				acceptedCount: 0, //接听数
				rejectedCount: 0, //拒接数
				giveUpQueuedCount: 0, //排队放弃数
				ringReleasedCount: 0, //振铃早释数
				avgQueuingDuration: 0, //平均排队时长
				avgRingingDuration: 0, //平均振铃时长
				avgAcceptedDuration: '', //平均会话时长
				noPictureCount: 0, //会话无画面数
				normalCount: 0, //会话正常数
				stuckedCount: 0, //卡顿数
				giveUpQueuedRatio: 0 //	排队放弃率
			},
			dayOption: [
				{ id: 1, label: '今天' },
				{ id: 2, label: '近七天' },
				{ id: 3, label: '近30天' }
			],
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick (picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick (picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick (picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			},
			activeDay: null,
			queryParams: {
				type: 'normal',
				startTime: '',
				endTime: ''
			}
		};
	},
	mounted () {
		this.initStatisticsDetails();
	},
	methods: {
		selectDay (id) {
			this.activeDay = id;
			let toData = new Date(new Date().toLocaleDateString()).getTime();
			console.log(id, toData);
			if (id === 1) {
				//今天
				let todayStart = toData; //开始时间
				let todayEnd = todayStart + 24 * 60 * 60 * 1000 - 1; //结束时间
				console.log('开始时间', moment(todayStart).format('YYYY-MM-DD HH:mm:ss'));
				console.log(moment(todayEnd).format('YYYY-MM-DD HH:mm:ss'), '结束时间');
				this.selectDayTime(moment(todayStart).format('YYYY-MM-DD HH:mm:ss'), moment(todayEnd).format('YYYY-MM-DD HH:mm:ss'));
				this.queryParams.startTime = '';
				this.queryParams.endTime = '';
			} else if (id === 2) {
				//最近7天
				let past7daysStart = toData - 6 * 3600 * 24 * 1000;
				let past7daysEnd = toData + 24 * 60 * 60 * 1000 - 1;
				console.log('开始7天', moment(past7daysStart).format('YYYY-MM-DD HH:mm:ss'));
				console.log('7天结束', moment(past7daysEnd).format('YYYY-MM-DD HH:mm:ss'));
				this.selectDayTime(moment(past7daysStart).format('YYYY-MM-DD HH:mm:ss'), moment(past7daysEnd).format('YYYY-MM-DD HH:mm:ss'));
				this.queryParams.startTime = '';
				this.queryParams.endTime = '';
			} else if (id === 3) {
				//最近30天
				let past30daysStart = toData - 29 * 3600 * 24 * 1000;
				let past30daysEnd = toData + 24 * 60 * 60 * 1000 - 1;
				this.selectDayTime(moment(past30daysStart).format('YYYY-MM-DD HH:mm:ss'), moment(past30daysEnd).format('YYYY-MM-DD HH:mm:ss'));
				this.queryParams.startTime = '';
				this.queryParams.endTime = '';
			} else {
				this.initStatisticsDetails();
			}
		},
		changeSatrt () {
			if (this.queryParams.startTime) {
				this.queryParams.startTime = moment(this.queryParams.startTime).format('YYYY-MM-DD HH:mm:ss');
				console.log('开始时间', this.queryParams.startTime);
			} else {
				this.queryParams.startTime = '';
			}
			this.activeDay = null;
		},
		changeEnd () {
			if (this.queryParams.endTime) {
				this.queryParams.endTime = moment(this.queryParams.endTime).format('YYYY-MM-DD HH:mm:ss');
				console.log('结束时间', this.queryParams.endTime);
			} else {
				this.queryParams.endTime = '';
			}
			this.activeDay = null;
			this.selectDayTime(this.queryParams.startTime, this.queryParams.endTime);
		},
		// 默认展示30天数据
		initStatisticsDetails () {
			this.activeDay = 3;
			let toData = new Date(new Date().toLocaleDateString()).getTime();
			let past30daysStart = toData - 29 * 3600 * 24 * 1000;
			let past30daysEnd = toData + 24 * 60 * 60 * 1000 - 1;
			this.selectDayTime(moment(past30daysStart).format('YYYY-MM-DD HH:mm:ss'), moment(past30daysEnd).format('YYYY-MM-DD HH:mm:ss'));
		},
		// 筛选今天 ，7天，30天的数据
		async selectDayTime (startTime, endTime) {
			let params = {
				type: 'normal', //transfer
				startTime: startTime,
				endTime: endTime
			};
			try {
				const { data } = await getSessionStatistics(params);
				if (data.code === 200) {
					this.statisticsData = data.data;
					this.statisticsData.avgAcceptedDuration = this.formatTime(this.statisticsData.avgAcceptedDuration);
					// console.log(this.statisticsData.avgAcceptedDuration, '平均会话时长');
					this.statisticsData.avgQueuingDuration = this.formatTime(this.statisticsData.avgQueuingDuration);
					this.statisticsData.avgRingingDuration = this.formatTime(this.statisticsData.avgRingingDuration);
					console.log('排队时长：', this.statisticsData.avgQueuingDuration, '振铃时长：', this.statisticsData.avgRingingDuration);
				} else {
					console.log('error initStatisticsDetails', data.data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取会话统计失败！');
			}
		},
		// 毫秒转换成时分秒显示
		formatTime (time) {
			// 毫秒转换成小时，大于24小时前面补0
			let hour =
				Math.floor(Math.floor(Math.round(time / 1000) / 60) / 60) % 24 < 10
					? '0' + (Math.floor(Math.floor(Math.round(time / 1000) / 60) / 60) % 24)
					: Math.floor(Math.floor(Math.round(time / 1000) / 60) / 60) % 24;
			//毫秒转换成分
			let minute = Math.floor(Math.round(time / 1000) / 60) % 60 < 10 ? '0' + (Math.floor(Math.round(time / 1000) / 60) % 60) : Math.floor(Math.round(time / 1000) / 60) % 60;
			//毫秒转换成秒
			let second = Math.round(time / 1000) % 60 < 10 ? '0' + (Math.round(time / 1000) % 60) : Math.round(time / 1000) % 60;
			console.log(hour, minute, second);
			if (time) {
				return `${hour}:${minute}:${second}`;
			}else{
				return '00:00:00'
			}
		}
	}
};
</script>

<style lang="less" scoped>
.session-statistics-container {
	margin-left: 19px;

	.header {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;

		.left-wrapper {
			margin-top: 5px;

			.title {
				font-size: 20px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 1000;
				color: #000000;
			}

			img {
				width: 12px;
				height: 14px;
				margin-left: 11px;
			}
		}

		.right-wrapper {
			display: flex;
			flex-wrap: wrap;

			.day {
				// width: 216px;
				// height: 30px;
				background: #ffffff;
				border-radius: 2px;
				border: 1px solid #e5e5e5;
				display: inline-block;
				margin-right: 14px;
				line-height: 30px;
				border-right: 0;

				span {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					cursor: pointer;
				}

				.day-text {
					display: inline-block;
					text-align: center;
					padding: 0 20px;
					border-right: 1px solid #e5e5e5;
					box-sizing: border-box;
				}

				.activeDayOption {
					border-radius: 2px;
					border: 1px solid #6384fe;
				}
			}

			.time {
				/deep/ .el-input__icon {
					line-height: 30px;
				}
			}
		}
	}

	.statistics-line {
		border: 1px solid #ebebeb;
		margin-top: 10px;
	}

	.session-content {
		margin-top: 32px;
		display: flex;
		// justify-content: space-between;
		width: 100%;

		.left-box {
			width: 25%;
			display: flex;
			justify-content: space-between;

			.title {
				// width: 39px;
				// height: 18px;
				font-size: 13px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				// line-height: 18px;
			}

			.value {
				font-size: 30px;
				font-family: Arial-BoldMT, Arial;
				font-weight: 700;
				color: #333333;
				margin-top: 14px;
			}
		}

		.marginTop38 {
			margin-top: 38px;
			display: inline-block;
		}

		.vertical-line {
			width: 2px;
			background: #ebebeb;
			display: inline-block;
			margin-left: 120px;
			margin-right: 50px;
		}

		.right-box {
			width: 25%;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 13px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.value {
				font-size: 30px;
				font-family: Arial-BoldMT, Arial;
				font-weight: 700;
				color: #333333;
				margin-top: 14px;
			}

			.ring-release {
				margin-top: 38px;
				display: inline-block;

				.question {
					width: 10px;
					height: 10px;
					margin-top: -8px;
					cursor: pointer;
				}

				.tips {
					display: none;
				}

				.imgQuestion:hover .tips {
					min-width: 170px;
					border: 1px solid #ebeef5;
					color: #333;
					line-height: 1.4;
					text-align: center;
					padding: 0 8px;
					position: absolute;
					color: #4e5254;
					background-color: #f6f6f6;
					box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
					border-radius: 4px;
					font-size: 12px;
					display: inline-block;
					margin-top: -18px;
				}
			}
		}

		.pie-wrapper {
			margin-left: 230px;

			.title {
				font-size: 13px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 35px;
			}

			/deep/.el-progress__text {
				font-size: 26px !important;
				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #333;
			}

			.circle-box {
				display: flex;
				margin-top: 16px;

				.queue-box {
					margin-left: 40px;

					span {
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.queup-background {
						width: 21px;
						height: 9px;
						background-color: #4f7afd;
						display: inline-block;
					}

					.form-line {
						margin-left: 4px;
					}

					.give-background {
						width: 21px;
						height: 9px;
						background-color: #ffb024;
						display: inline-block;
					}

					.give-up {
						margin-left: 4px;
					}
				}
			}
		}
	}
}
</style>
<style lang="less"></style>
